<template>
	<view>

		<view style="padding: 30rpx 30rpx 100rpx 30rpx;background: #4066F4;text-align: left;color: #fff;"
			class="u-flex u-row-between">
			<view>
				<view>当前余额</view>
				<view style="font-size: 40rpx;">￥{{info.balance}}</view>
			</view>


		</view>
		
	    <u-popup mode="center" v-model="inputShow">
			<view>
				<view class="mode"  style="border-radius: 20rpx;">
					<u-cell-item :border-bottom="false" title="充值金额" :hover-class="false" :arrow="false">
						<input placeholder="请输入充值金额"  slot='label' type="digit" v-model="currentMoneny"/>
					</u-cell-item>
					
					<u-button shape="circle"
						:custom-style="{background:'#4066F4',color:'#fff',marginTop:'40rpx',width:'400rpx',marginBottom:'0rpx'}"
							@click="submit(1)">
						立即充值</u-button>
				</view>
			</view>
		</u-popup>
		

		<view class="" style="background: #fff;border-radius: 60rpx 60rpx  0 0;position: relative;bottom: 50rpx;padding-top: 40rpx;">
		
			
			<view class="u-padding-30 shadow" style="width: 700rpx;margin: auto;">
				<view class="u-font-weight">充值金额</view>
				<view class="u-flex u-flex-wrap u-row-between u-margin-top-20">
					<view @click="Block(index,item)" v-for="(item,index) in list" :key="index" class="listBlock" :class="current==index?'Listchange':''">
						<view style="font-size: 34rpx;"><text v-if="item.id">￥</text>{{item.money}}</view>
						<view class="u-font-xs u-margin-top-30">{{item.remark}}</view>
					</view>
				</view>
			</view>
			
			
			
			<view class="bottomFix">
				<u-button shape="circle"
					:custom-style="{background:'#4066F4',color:'#fff',marginTop:'40rpx',width:'500rpx',marginBottom:'40rpx'}"
					@click="submit(2)">
					立即充值</u-button>
				
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import payway from '@/common/wxpay.js';
	export default {
		data() {
			return {
	      		currentMoneny:"",
				info:{},
				list:[],
				current:0,
				inputShow:false
			}
		},
		onLoad() {

		},
		onShow() {
			this.information()
			
			this.getMenyone()

		},
		methods: {
			Block(index,item){
			  this.current=index;
			  
			  if(!item.id){
				  this.inputShow=true;
			  }
			  
			},
			getMenyone(){
					this.$u.post('/index/recharge', {
						
					}).then(res=>{
						res.push({
							money:"自定义金额",
							remark:"不赠送优惠券~",
							id:''
						})
						this.list=res;
					})
			},
		
			information() {
				this.$u.api.userInfo().then(res=>{
								this.info=res
							})
			},
			submit(e) {
				this.$u.post('/indent/recharge', {
                      money:e==1?this.currentMoneny:this.list[this.current].money,
					  recharge_id:e==1?'':this.list[this.current].id,
				}, {}).then(res => {
				  if (!Array.isArray(res) ) {
				  	var packages = res.package;
				  	var {
				  		noncestr,
				  		timestamp,
				  		signtype,
				  		paysign
				  	} = res
				  	payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
				  		this.$refs.uToast.show({
				  		title: '充值成功',
				  		type: 'success',
				  		back:true
				  		})
				  	}).catch(err => {
				  		uni.navigateBack({
				  
				  		})
				  	})
				  } else {
				  }
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss">
	.row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 40rpx;
	}

	.btns {
		background: #F7F7F7;
		border-radius: 60rpx;
		text-align: center;
		color: #999999;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		padding: 14rpx 20rpx;
	}

	.change {
		background: #628DFF;
		color: #FFFFFF;
		opacity: 1;
		transition: all 0.3s
	}
	.mode{
		box-shadow: 0px 2px 6px rgba(153, 153, 153, 0.2);
		
	}
	.u-cell{
		padding: 0!important;
	}
	.listBlock{
		width: 280rpx;
		text-align: center;
	    border: 1rpx solid #bebebe;
		border-radius: 10rpx;
		padding: 20rpx;
		height: 160rpx;
		margin-bottom: 20rpx;

	}
	
	.Listchange{
		color: #fff;
		background: #FF5D39;
		border: 0;
		transition: all 0.3s;
	}
</style>
